import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import router from 'umi/router';
import { Card, Row, Col, Tabs, Tooltip, Icon, Tag } from 'antd';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { formatMessage, FormattedMessage } from 'umi/locale';
import DeviceInfo from '../components/info';
import DeviceTopic from '../components/topic';
import DeviceTCP from '../components/tcp';
import DeviceModbus from '../components/modbus';
import DeviceState from '../components/state';
import DeviceEvent from '../components/event';
import DeviceCommandRecord from '../components/commandrecord';
import ChildDeviceManage from '../components/child';
import DeviceProtocolInfo from '../components/protocol';
import DeviceProtocolDetail from '../components/protocol/detail';
import styles from './style.less';

const { TabPane } = Tabs;

@connect(({ devices, loading }) => ({
  devices,
  loading: loading.models.devices,
}))
class DevicesDetail extends PureComponent {
  state = {
    tabActiveKey: '1',
  };

  componentDidMount() {
    const { dispatch, match, location } = this.props;
    const { params } = match;
    const { activeChildDeviceTab } = location.state;
    if (activeChildDeviceTab) {
      this.setState({
        tabActiveKey: '10',
      });
    }
    dispatch({
      type: 'devices/fetchDetail',
      payload: params.id,
    });
  }

  handleView = id => {
    router.push(`/dm/product/detail/${id}`);
  };

  onChangeTab = key => {
    this.setState({ tabActiveKey: key });
  };

  render() {
    const {
      match,
      devices: { detail },
      location,
    } = this.props;
    const { params } = match;
    const { tabActiveKey } = this.state;
    const { showChildDeviceTab, protocol, protocolId, isChildDetail } = location.state;

    const showDeviceState = state => {
      if (state === 1) {
        return <FormattedMessage id="app.dm.devices.info.notactive" />;
      }
      if (state === 2) {
        return <FormattedMessage id="app.dm.devices.info.enable" />;
      }
      if (state === 3) {
        return <FormattedMessage id="app.dm.devices.info.disabled" />;
      }
      if (state === 4) {
        return <FormattedMessage id="app.dm.devices.info.online" />;
      }
      if (state === 5) {
        return <FormattedMessage id="app.dm.devices.info.offline" />;
      }
      return null;
    };

    const showProductState = state => {
      if (state === 1) {
        return <FormattedMessage id="app.dm.devices.info.development" />;
      }
      if (state === 2) {
        return <FormattedMessage id="app.dm.devices.info.released" />;
      }
      return null;
    };

    const showProtocolTab = p => {
      if (p === 1) {
        return <DeviceTopic />;
      }
      if (p === 2) {
        return <DeviceTCP params={params} />;
      }
      if (p === 3) {
        return <DeviceModbus params={params} />;
      }
      return null;
    };

    const showProtocolTabHelp = p => {
      if (parseFloat === 1) {
        return (
          <div>
            <span>{formatMessage({ id: 'app.dm.devices.detail.topic.help' })}</span>
            <a style={{ marginLeft: 5 }}>
              {formatMessage({ id: 'app.dm.devices.detail.topic.help.doc' })}
            </a>
          </div>
        );
      }
      if (p === 2) {
        return (
          <div>
            <span>{formatMessage({ id: 'app.dm.devices.detail.tcpip.help' })}</span>
            <a style={{ marginLeft: 5 }}>
              {formatMessage({ id: 'app.dm.devices.detail.tcpip.help.doc' })}
            </a>
          </div>
        );
      }
      if (p === 3) {
        return (
          <div>
            <span>{formatMessage({ id: 'app.dm.devices.detail.modbus.help' })}</span>
            <a style={{ marginLeft: 5 }}>
              {formatMessage({ id: 'app.dm.devices.detail.modbus.help.doc' })}
            </a>
          </div>
        );
      }
      return null;
    };

    const showProtocolTabTitle = p => {
      if (p === 1) {
        return formatMessage({ id: 'app.dm.devices.detail.topic' });
      }
      if (p === 2) {
        return formatMessage({ id: 'app.dm.devices.detail.tcpip' });
      }
      if (p === 3) {
        return formatMessage({ id: 'app.dm.devices.detail.modbus' });
      }
      return null;
    };

    return (
      <PageHeaderWrapper>
        <div className={styles.standardList}>
          <Card bordered={false} style={{ marginBottom: '24px' }}>
            <Row style={{ marginBottom: '24px' }}>
              <span style={{ fontWeight: 'bold', marginRight: 20 }}>{detail.name}</span>
              <Tag color="#108ee9">{showDeviceState(detail.state)}</Tag>
            </Row>
            <Row>
              <Col span={8}>
                <span style={{ color: '#a3a3a3' }}>
                  <FormattedMessage id="app.dm.devices.info.product" />
                </span>
                <span style={{ color: '#666666' }}>{detail.productName}</span>
                <a style={{ marginLeft: 10 }} onClick={() => this.handleView(detail.productId)}>
                  <FormattedMessage id="app.dm.devices.info.product.view" />
                </a>
              </Col>
              <Col span={8}>
                <span style={{ color: '#a3a3a3' }}>
                  <FormattedMessage id="app.dm.devices.info.productkey" />
                </span>
                <span style={{ color: '#666666' }}>{detail.productKey}</span>
              </Col>
              <Col span={8} style={{ textAlign: 'center' }}>
                <span style={{ color: '#a3a3a3' }}>
                  <FormattedMessage id="app.dm.devices.info.productstate" />
                </span>
                <span style={{ color: '#666666' }}>{showProductState(detail.productState)}</span>
              </Col>
            </Row>
          </Card>
          <Card bordered={false}>
            <Tabs activeKey={tabActiveKey} onChange={key => this.onChangeTab(key)} animated={false}>
              <TabPane tab={formatMessage({ id: 'app.dm.devices.detail.info' })} key="1">
                <DeviceInfo detail={detail} />
              </TabPane>

              <TabPane
                tab={
                  <Fragment>
                    <span>{showProtocolTabTitle(protocol)}</span>
                    <em className={styles.optional} style={{ marginLeft: 5 }}>
                      <Tooltip title={showProtocolTabHelp(protocol)}>
                        <Icon type="info-circle-o" style={{ marginLeft: 4 }} />
                      </Tooltip>
                    </em>
                  </Fragment>
                }
                key="2"
              >
                {showProtocolTab(protocol)}
              </TabPane>
              <TabPane
                tab={
                  <Fragment>
                    <span>运行状态</span>
                    <em className={styles.optional} style={{ marginLeft: 5 }}>
                      <Tooltip title="设备数据上报的最新属性值，点击“查看数据”可以查看指定属性的历史数据">
                        <Icon type="info-circle-o" style={{ marginLeft: 4 }} />
                      </Tooltip>
                    </em>
                  </Fragment>
                }
                key="3"
              >
                <DeviceState params={params} />
              </TabPane>
              <TabPane tab="事件管理" key="4">
                <DeviceEvent />
              </TabPane>
              <TabPane
                tab={
                  <Fragment>
                    <span>服务调用</span>
                    <em className={styles.optional} style={{ marginLeft: 5 }}>
                      <Tooltip title="下发给设备的远程指令，包括属性设置（set）和服务调用的记录。">
                        <Icon type="info-circle-o" style={{ marginLeft: 4 }} />
                      </Tooltip>
                    </em>
                  </Fragment>
                }
                key="5"
              >
                <DeviceCommandRecord params={params} />
              </TabPane>

              {protocol === 3 ? (
                <TabPane tab={formatMessage({ id: 'app.dm.devices.detail.protocol.info' })} key="6">
                  <DeviceProtocolInfo params={params} />
                </TabPane>
              ) : (
                undefined
              )}

              {protocol === 3 ? (
                <TabPane
                  tab={formatMessage({ id: 'app.dm.devices.detail.protocol.detail' })}
                  key="7"
                >
                  <DeviceProtocolDetail
                    params={params}
                    protocolId={protocolId}
                    protocol={protocol}
                  />
                </TabPane>
              ) : (
                undefined
              )}

              {showChildDeviceTab ? (
                <TabPane tab="子设备管理" key="10">
                  <ChildDeviceManage
                    params={params}
                    protocolType={protocol}
                    isChildDetail={isChildDetail}
                    onChangeTab={this.onChangeTab}
                  />
                </TabPane>
              ) : (
                undefined
              )}
            </Tabs>
          </Card>
        </div>
      </PageHeaderWrapper>
    );
  }
}

export default DevicesDetail;
